<script lang="ts" setup="">
import { IconDefinition } from '@ant-design/icons-svg/es/types'
import { renderIconDefinitionToSVGElement } from '@ant-design/icons-svg/es/helpers'
import { message } from 'ant-design-vue'

const { icon } = defineProps({
	icon: {
		type: Object,
		required: true,
	},
})

const svgHTMLString = renderIconDefinitionToSVGElement(icon as IconDefinition, {
	extraSVGAttrs: { width: '50px', height: '50px', fill: 'currentColor' },
})

const iconPath: string = `<${(icon as IconDefinition).name}-${
	(icon as IconDefinition).theme
} />`

function handle_cardClickCopy() {
	// ! chrome禁用了非安全区域的navigator.clipboard对象，且安全区域包括本地访问与开启TLS安全认证的地址，如 https 协议的地址、127.0.0.1 或 localhost。
	// ? 以下为另一种做法
	// document.body.addEventListener('copy',e=>{
	//   const copyData='复制的内容'
	//   let clipboardData= window.clipboardData // 兼容 IE
	//   if ( !clipboardData ){
	//     clipboardData=e.clipboardData
	//   }
	//   clipboardData.setData('Text',copyData)
	//   e.preventDefault()
	// })
	if (navigator.clipboard && window.isSecureContext) {
		navigator.clipboard.writeText(iconPath).then(value => {
			message.success(`${iconPath}复制成功`)
		})
	} else {
		const textArea = document.createElement('textarea')
		textArea.value = iconPath
		textArea.style.position = 'absolute'
		textArea.style.left = '-999999px'
		textArea.style.top = '-999999px'
		document.body.appendChild(textArea)
		textArea.focus()
		textArea.select()
		if (document.execCommand('copy')) {
			document.execCommand('copy')
			message.success(`${iconPath}复制成功`)
		}
		document.body.removeChild(textArea)
	}
}
</script>

<template>
	<a-card class="card" hoverable @click="handle_cardClickCopy">
		<div class="flex-column align-center">
			<div class="myIcon" v-html="svgHTMLString"></div>
			<div>{{ icon.name + '-' + icon.theme }}</div>
		</div>
	</a-card>
</template>

<style lang="scss" scoped>
.card {
	width: 210px;
}
</style>
